<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 面包屑 -->
        <el-breadcrumb
          separator-class="el-icon-arrow-right"
          v-if="isloding === 1 ? true : false"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ loginName }}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
          <el-divider style="width: 100%"></el-divider>
        </el-breadcrumb>

        <!-- <el-divider style="width: 100%"></el-divider> -->
        <!-- 中间 -->
        <el-form
          ref="rrr"
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="标签名称">
            <el-input v-model="formInline.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formInline.state" placeholder="请选择">
              <el-option label="禁用" value="0"></el-option>
              <el-option label="启用" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clearSubmit">清除</el-button>
            <el-button type="primary" @click="searchData">搜索</el-button>
          </el-form-item>
          <el-button
            class="fr"
            size="small"
            type="success"
            icon="el-icon-edit"
            @click="openshowDialog"
            >新增用户</el-button
          >
          <el-button
            class="fr"
            type="text"
            v-if="isloding === 1 ? true : false"
            @click="$router.push(`/subjects/list`)"
            >返回学科</el-button
          >
        </el-form>
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 主体数据 -->
        <el-table :data="listData" style="width: 100%">
          <el-table-column label="序号" type="index" :index="indexMethod">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            :formatter="sFormat"
          ></el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            :formatter="stateFormat"
          ></el-table-column>
          <el-table-column prop="state" label="操作">
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="action(row.state, row.id)"
                >{{ row.state == 0 ? "启用" : "禁用" }}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.state == 0 ? false : true"
                @click.stop="backBtn(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="row.state == 0 ? false : true"
                @click="delTags(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block fr">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="aData.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="aData.pagesize"
            layout=" prev, pager, next, sizes, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 弹框 -->
      <el-dialog
        :title="showTitle"
        :visible="showDialog"
        @close="closeshowDialog"
        :close-on-click-modal="false"
        width="25%"
      >
        <el-form
          ref="roleForm"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item
            label="所属学科"
            prop="subjectID"
            v-if="isloding === 1 ? false : true"
          >
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              style="width: 100%"
              ><el-option
                v-for="item in vdata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            /></el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName">
            <el-input v-model="form.tagName" placeholder="请输入目录名称" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="closeshowDialog">取消</el-button>
          <el-button type="primary" @click.stop="submitBtn">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  list as tagsList,
  subjects as subjectsApi,
  changeState,
  add as addApi,
  remove as removeApi,
  update as updateApi
} from '@/api/hmmm/tags.js'
export default {
  data () {
    return {
      biaoti: 0,
      dData: {
        page: 1,
        pagesize: 10,
        tagName: ''
      },
      bData: {
        state: 0,
        id: ''
      },
      aData: {
        page: 1,
        pagesize: 10
        // tagName: '',
        // subjectID: ''
      },
      showDialog: false,
      isloding: 0,
      formInline: {
        name: '',
        state: ''
      },
      form: {
        tagName: '',
        subjectID: ''
      },
      listData: [],
      loginName: '',
      vdata: [],
      total: 0,
      rules: {
        tagName: [
          {
            required: true,
            message: '请输入标签名称',
            trigger: 'blur'
          }
        ],
        subjectID: [
          {
            required: true,
            message: '请输入所属学科',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler () {
        this.getPath()
      }
    }
  },
  computed: {
    showTitle () {
      if (this.isloding === 1) {
        return this.biaoti === 1 ? '编辑角色' : '添加角色'
      }
      return this.form.subjectID ? '编辑角色' : '添加角色'
    }

  },
  created () {
    this.tagsLists()
    this.subjects()
  },

  methods: {
    // 搜寻
    searchData () {
      const tName = this.formInline.name
      const std = this.formInline.state
      // this.cleara()
      if (this.isloding === 1) {
        if (tName !== '' && std === '') {
          this.aData.tagName = tName
          this.listData = [this.tagsLists()]
        } else if (tName === '' && std !== '') {
          this.aData.state = Number(std)
          this.listData = [this.tagsLists()]
        } else if (tName !== '' && std !== '') {
          this.aData.tagName = tName
          this.aData.state = Number(std)
          this.listData = [this.tagsLists()]
        } else {
          this.tagsLists()
        }
      } else {
        this.cleara()
        if (tName !== '' && std === '') {
          this.aData.tagName = tName
          this.listData = [this.tagsLists()]
        } else if (tName === '' && std !== '') {
          this.aData.state = Number(std)
          this.listData = [this.tagsLists()]
        } else if (tName !== '' && std !== '') {
          this.aData.state = Number(std)
          this.aData.tagName = tName
          this.listData = [this.tagsLists()]
        } else {
          // this.aData.tagName = tName
          // console.log(std)
          // this.aData.state = Number(std)
          this.tagsLists()
        }
        this.total = this.listData.length
      }
    },
    // 清空a
    cleara () {
      this.aData = {
        page: 1,
        pagesize: 10
      }
      // this.formInline = {
      //   name: '',
      //   state: ''
      // }
    },
    // 回显
    backBtn (row) {
      this.openshowDialog()
      this.form = row
      this.biaoti = 1
    },
    // 删除
    delTags (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示')
        .then(async () => {
          await removeApi(row)
          this.tagsLists()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    // 提交
    submitBtn () {
      this.$refs.roleForm.validate(async (valid) => {
        if (!valid) return false
        if (this.form.id) {
          await updateApi(this.form)
          this.$message.success('编辑成功')
        } else {
          await addApi(this.form)
          this.$message.success('添加成功')
        }

        this.closeshowDialog()
        this.tagsLists()
      })
    },
    // 打开弹窗
    openshowDialog () {
      this.biaoti = 0
      this.showDialog = true
      if (this.isloding !== 1) {
        this.form = {
          tagName: '',
          subjectID: ''

        }
        this.$refs.roleForm.resetFields()
      }
    },
    // 关闭弹窗
    closeshowDialog () {
      if (this.isloding === 1) {
        this.form.tagName = ''
      } else {
        this.form = {
          tagName: '',
          subjectID: ''
        }
      }
      this.showDialog = false
      this.$refs.roleForm.resetFields()
    },

    sFormat (row, column) {
      return this.formatTime(row.addDate)
    },
    // state处理
    stateFormat (row, column) {
      if (row.state === 0) {
        return '已禁用'
      } else {
        return '已启用'
      }
    },
    // 禁用启用按钮点击
    async action (val, id) {
      this.bData.state = Number(!val)
      this.bData.id = id
      await changeState(this.bData)
      this.$message.success('操作成功')
      this.tagsLists()
    },
    // 学科列表
    async subjects () {
      const { data } = await subjectsApi()
      this.vdata = data
    },
    // 初始化列表请求
    async tagsLists () {
      const { data } = await tagsList(this.aData)
      this.total = data.counts
      this.dData.pagesize = data.counts
      this.listData = data.items
    },
    // 显示与隐藏

    getPath () {
      if (this.$route.query.name) {
        this.loginName = this.$route.query.name
        this.aData.subjectID = this.$route.query.id
        this.form.subjectID = Number(this.$route.query.id)
        this.listData = [this.tagsLists()]
        this.total = this.listData.length
        this.isloding = 1
      } else {
        this.cleara()
        this.tagsLists()
        this.isloding = 0
      }
    },
    // 点击清除
    clearSubmit () {
      this.formInline.name = ''
      this.formInline.state = ''
      delete this.aData.state
    },
    // 计算索引
    indexMethod (index) {
      return (this.aData.page - 1) * this.aData.pagesize + index + 1
    },
    handleSizeChange (val) {
      this.aData.pagesize = val
      this.aData.page = 1
      this.tagsLists()
    },
    handleCurrentChange (val) {
      this.aData.page = val
      this.tagsLists()
    },
    // 时间格式化
    formatTime (time) {
      const date = new Date(time)
      const Y = date.getFullYear() + '-'
      const M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      const D = date.getDate() + ' '
      const h = date.getHours() + ':'
      const m =
        date.getMinutes() < 10
          ? '0' + date.getMinutes() + ':'
          : date.getMinutes() + ':'
      const s = date.getSeconds()
      return Y + M + D + h + m + s
    }
  }
}
</script>

<style scoped lang="scss">
</style>
